<script setup>
import { ref } from "vue";
import { ElMessage } from "element-plus";
import {UserResetPsd} from "@/api/user.js";
import {userTokenStore} from "@/store/userTokenStore.js";
import Router from "@/router/index.js";
const TokenStore = userTokenStore();
const form = ref({
  old_pwd: "",
  new_pwd: "",
  re_pwd: "",
});

const rules = {
  old_pwd: [
    { required: true, message: "请输入原密码", trigger: "blur" },
    {
      min: 5,
      max: 16,
      message: "密码长度为5-16位",
      trigger: "blur",
    },
  ],
  new_pwd: [
    { required: true, message: "请输入新密码", trigger: "blur" },
    {
      min: 5,
      max: 16,
      message: "密码长度为5-16位",
      trigger: "blur",
    },
  ],
  re_pwd: [
    { required: true, message: "请输入确认新密码", trigger: "blur" },
    {
      min: 5,
      max: 16,
      message: "密码长度为5-16位",
      trigger: "blur",
    },
    {
      validator: (rule, value, callback) => {
        if (value !== form.value.new_pwd) {
          callback(new Error("两次输入的密码不一致"));
        } else {
          callback();
        }
      },
      trigger: "blur",
    },
  ],
};

const submitForm = async () => {
  await UserResetPsd(form.value);
  ElMessage.success("修改成功! 请重新登录!");
  TokenStore.removeToken();
  resetForm();
  await Router.push('/login')
};

const resetForm = () => {
  form.value = {
    old_pwd: "",
    new_pwd: "",
    re_pwd: "",
  };
};
</script>

<template>
  <el-card class="page-container">
    <template #header>
      <div class="header">
        <span>重置密码</span>
      </div>
    </template>
    <div class="password-update-container">
      <el-form
        :model="form"
        ref="formRef"
        label-width="120px"
        :rules="rules"
        class="password-update-form"
      >
        <el-form-item class="el-form-item__label" label="原密码" prop="old_pwd">
          <el-input
            class="el-input"
            v-model="form.old_pwd"
            type="password"
            placeholder="请输入原密码"
          ></el-input>
        </el-form-item>
        <el-form-item class="el-form-item__label" label="新密码" prop="new_pwd">
          <el-input
            class="el-input"
            v-model="form.new_pwd"
            type="password"
            placeholder="请输入新密码"
          ></el-input>
        </el-form-item>
        <el-form-item
          class="el-form-item__label"
          label="确认新密码"
          prop="re_pwd"
        >
          <el-input
            class="el-input"
            v-model="form.re_pwd"
            type="password"
            placeholder="请再次输入新密码"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="submitForm" type="primary" class="submit-button"
            >提交</el-button
          >
          <el-button @click="resetForm" class="reset-button">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-card>
</template>

以下是修改后的 `style`
部分，主要从颜色搭配、元素间距、字体细节等方面让界面更美观： ```css
<style scoped>
/* 整体容器 */
.password-update-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 75vh;
  background-color: #f0f5f9; /* 浅蓝灰色背景，更柔和 */
}
/* 表单 */
.password-update-form {
  background-color: white;
  padding: 40px;
  border-radius: 10px; /* 更大的圆角，更圆润 */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* 更强的阴影，更立体 */
  width: 450px; /* 适当加宽 */
  border: 1px solid #e0e6ed; /* 浅灰色边框 */
}
/* 表单标签 */
.el-form-item__label {
  color: #344054; /* 深灰色标签文字 */
  font-weight: 500; /* 稍加重字体 */
}
/* 输入框 */
.el-input {
  width: 300px; /* 加宽输入框 */
  border-radius: 6px; /* 输入框圆角 */
  border: 1px solid #d0d7de; /* 浅灰色边框 */
  transition: border-color 0.2s ease; /* 过渡效果，鼠标悬停更丝滑 */
}
.el-input:hover {
  border-color: #9ca3af; /* 悬停时边框变色 */
}
/* 提交按钮 */
.submit-button {
  margin-right: 10px;
  background-color: #1d78f0; /* 蓝色主色调按钮 */
  border-color: #1d78f0;
  color: white;
  font-weight: 500;
  padding: 10px 20px; /* 调整按钮内边距 */
  border-radius: 6px;
  transition: background-color 0.2s ease; /* 过渡效果，鼠标悬停更丝滑 */
}
.submit-button:hover {
  background-color: #0f69e3; /* 悬停时颜色变深 */
}
/* 重置按钮 */
.reset-button {
  background-color: #e9ecef;
  color: #495057;
  font-weight: 500;
  padding: 10px 20px; /* 调整按钮内边距 */
  border-radius: 6px;
  transition: background-color 0.2s ease; /* 过渡效果，鼠标悬停更丝滑 */
}
.reset-button:hover {
  background-color: #dee2e6;
}
</style>
``` 将上述代码替换原组件中的 `style` 标签内容，能让界面在视觉上更舒适美观。
